<template>
  <view class="card" :style="style" :class="show ? 'show' : ''">
    <view class="front">
      <img :src="type[details.level].bg" class="draw-bg" alt="" />
      <view class="info">
        <view class="tag">
          {{ details.key }}
        </view>
        <view class="level res-level" :class="type[details.level].style">
          <text>{{ details.reward_name }}</text
          >赏</view
        >
        <image class="cover" :src="details.goods_image" />
        <image class="avatar" :src="details.goods_image" />
        <view class="name nowrap_ellipsis">{{ details.goods_name }}</view>
      </view>
    </view>
    <view class="back">
      <img class="back-bg" src="../img/card-10.png" />
      <view class="back-num">{{ number >= 10 ? number : '0' + number }}</view>
    </view>
  </view>
</template>
<script>
import { DRAW_TYPE } from '../fullOpen_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    details: {
      type: Object,
      default: {},
    },
    show: {
      type: Boolean,
      default: false,
    },
    number: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      type: DRAW_TYPE,
    };
  },
  // 计算属性 适配者模式
  computed: {
    style() {
      return `--num: ${(Math.atan(this.number) + this.number * 0.1).toFixed(
        3
      )}s`;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.info,
.draw-bg,
.front,
.back,
.card {
  width: 162rpx;
  height: 202rpx;
}
.draw-bg {
  position: absolute;
  top: 0;
  left: 0;
}
.info,
.card {
  position: relative;
  z-index: 1;
}
.card {
  --num: 0.2s;
  --timing: 0.6s;
  perspective: 200px;
  &.show {
    .front {
      animation: card-in-rotate var(--timing) ease-in var(--num) 1 normal
        forwards;
    }
    .back {
      animation: back-in-rotate var(--timing) ease-in var(--num) 1 normal
        forwards;
    }
  }
}
.info {
  .tag {
    position: absolute;
    top: 5rpx;
    left: 6rpx;
    font-size: 22rpx;
    font-weight: bold;
    color: #ffffff;
  }
  .level {
    position: absolute;
    top: 14rpx;
    right: 0rpx;
    transform: translate(-50%, -50%);
  }
  .cover {
    position: absolute;
    top: 14rpx;
    left: calc(50% - 76rpx);
    width: 152rpx;
    height: 152rpx;
  }

  .avatar {
    position: absolute;
    bottom: 44rpx;
    right: 3rpx;
    width: 35rpx;
    height: 35rpx;
    border: 4rpx solid #fff;
    background-color: #fff;
    border-radius: 15rpx 0rpx 15rpx 0rpx;
  }
  .name {
    position: absolute;
    bottom: 4rpx;
    left: 0;
    padding: 4rpx 6rpx;
    width: 100%;
    text-align: center;
    font-size: 22rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
  }
}
.back,
.front {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.front {
  transform: rotateY(180deg);
}
.back {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .back-num {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 26rpx;
    color: #fff;
  }
  .back-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.res-level {
  text {
    margin-right: 3rpx;
    font-size: 24rpx;
  }
  font-size: 14rpx;
  font-weight: bold;
  color: #ffffff;
  &.z {
    background-image: linear-gradient(
      45deg,
      rgba(246, 225, 30, 1),
      rgba(102, 237, 112, 1),
      rgba(43, 205, 215, 1)
    ) !important;
    background-clip: text !important;
    color: transparent !important;
  }
  &.s {
    color: #000000;
  }
}
@keyframes card-in-rotate {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes back-in-rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}
</style>
